"use client";
import React from "react";
import HeartIcon from "../components/HeartIcon/HeartIcon";
import { Avatar, AvatarGroup, Button, Link } from "@nextui-org/react";
import "./home.css";
export default function Home() {
  return (
    <div>
      <AvatarGroup isBordered>
        <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
        <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
        <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
        <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
        <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
        <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
      </AvatarGroup>
      <div className="containerbg ">
        <div className="container">
          <div className="textContainer">
            <h2 className="subtitle">About： @廖子乔</h2>
            <h1 className="title">A web developer</h1>
            <p className="desc">
              As a web developer, We create digital ideas that are bigger,
              bolder, braver and better. We believe in good ideas flexibility
              and precission We’re world’s Our Special Team best consulting &
              finance solution provider. Wide range of web and software
              development services.
            </p>
            <div className="boxes">
              <div className="box">
                <h1>Vue2 & Vue3</h1>
                <p>3 Year of experience</p>
              </div>
              <div className="box">
                <h1>React & ReactNative</h1>
                <p>2 Year of experience</p>
              </div>
              <div className="box">
                <h1>Ts & Next</h1>
                <Button
                  href="https://gitee.com/liao-ziqiao/next-ui2024"
                  as={Link}
                  isIconOnly
                  color="danger"
                  aria-label="Like"
                >
                  <HeartIcon />
                </Button>
              </div>
              <div className="box">
                <h1>Gitee Product</h1>
                <Button
                  href="https://gitee.com/liao-ziqiao/next-ui2024"
                  as={Link}
                  radius="full"
                  className="bg-gradient-to-tr from-pink-500 to-blue-500 text-white shadow-lg"
                >
                  Go View
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
